<template>
  <div>
    <div id="container" class="map-container"></div>
    <div class="map-controls">
      <div class="search-container">
        <a-select
          v-model:value="searchKeyword"
          placeholder="请输入地址搜索"
          class="search-input"
          show-search
          :filter-option="false"
          :not-found-content="'搜索中...'"
          :options="poiOptions"
          :loading="searchLoading"
          @search="handleSearchInput"
          @change="handleSelectChange"
          :dropdown-match-select-width="false"
          dropdown-class-name="map-search-dropdown"
        >
          <template #option="{ value: val, label, data }">
            <div class="poi-option">
              <span>{{ label }}</span>
              <span class="poi-district">{{ data.district }}</span>
            </div>
          </template>
        </a-select>
      </div>
      <a-button @click="confirmLocation" type="primary">确认位置</a-button>
    </div>
    <div class="coordinate-display">
      <p>当前坐标：经度 {{ longitude }}, 纬度 {{ latitude }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

// 定义props
const props = defineProps({
  initialLongitude: {
    type: [String, Number],
    default: 114.5149, // 石家庄市经度
  },
  initialLatitude: {
    type: [String, Number],
    default: 38.0428, // 石家庄市纬度
  },
});
// 定义高德安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '08f0a1474de007139c4675607d950cd1',
};
// 定义emit
const emit = defineEmits(['confirm', 'close']);

// 地图相关变量
const map = ref<any>(null);
const marker = ref<any>(null);
const AMap = ref<any>(null);
const geocoder = ref<any>(null);
const autoComplete = ref<any>(null);
// 确保经纬度值为数字类型
const longitude = ref<number>(parseFloat(props.initialLongitude as string));
const latitude = ref<number>(parseFloat(props.initialLatitude as string));
const searchKeyword = ref<string>('');
// POI搜索相关变量
const poiOptions = ref<any[]>([]);
const searchLoading = ref<boolean>(false);

// 初始化地图
const initMap = async () => {
  try {
    console.log('初始化地图，经度:', longitude.value, '纬度:', latitude.value);

    AMap.value = await AMapLoader.load({
      key: 'b072f230c4ca752fc0a9fb637f06bc38', // 您的高德地图 API 密钥
      version: '2.0',
      plugins: ['AMap.Geocoder', 'AMap.AutoComplete'], // 需要使用的插件列表
    });

    // 初始化自动完成插件
    autoComplete.value = new AMap.value.AutoComplete({
      city: '全国', // 城市，默认全国
      citylimit: false, // 是否限制城市
    });

    // 确保经纬度值有效
    const validLng = isNaN(longitude.value) ? 114.5149 : longitude.value;
    const validLat = isNaN(latitude.value) ? 38.0428 : latitude.value;

    map.value = new AMap.value.Map('container', {
      zoom: 13,
      center: [validLng, validLat],
    });

    console.log('地图中心点设置为:', validLng, validLat);

    // 添加标记
    marker.value = new AMap.value.Marker({
      position: [validLng, validLat],
      draggable: true,
      map: map.value,
    });

    // 更新坐标显示
    longitude.value = validLng;
    latitude.value = validLat;

    // 初始化地理编码器
    geocoder.value = new AMap.value.Geocoder({
      city: '全国', // 城市，默认全国
    });

    // 点击地图更新坐标
    map.value.on('click', (e: any) => {
      updateMarkerPosition(e.lnglat.getLng(), e.lnglat.getLat());
    });

    // 拖拽标记更新坐标
    marker.value.on('dragend', (e: any) => {
      updateMarkerPosition(
        e.target.getPosition().getLng(),
        e.target.getPosition().getLat(),
      );
    });
  } catch (error) {
    console.error('高德地图加载失败', error);
  }
};

// 更新标记位置
const updateMarkerPosition = (lng: number, lat: number) => {
  console.log('更新标记位置:', lng, lat);

  // 确保经纬度值有效
  if (isNaN(lng) || isNaN(lat)) {
    console.error('无效的经纬度值:', lng, lat);
    return;
  }

  // 更新响应式变量
  longitude.value = lng;
  latitude.value = lat;

  // 更新地图标记位置
  if (marker.value) {
    try {
      marker.value.setPosition([lng, lat]);
    } catch (error) {
      console.error('设置标记位置失败:', error);
      // 尝试重新创建标记
      if (map.value && AMap.value) {
        marker.value = new AMap.value.Marker({
          position: [lng, lat],
          draggable: true,
          map: map.value,
        });
      }
    }
  } else {
    console.error('标记对象不存在');
    // 尝试重新创建标记
    if (map.value && AMap.value) {
      marker.value = new AMap.value.Marker({
        position: [lng, lat],
        draggable: true,
        map: map.value,
      });
    }
  }
};

// 确认位置
const confirmLocation = () => {
  console.log('确认位置，经度:', longitude.value, '纬度:', latitude.value);
  emit('confirm', {
    longitude: longitude.value,
    latitude: latitude.value,
  });
};

// 组件挂载时初始化地图
onMounted(() => {
  initMap();
});

// 监听搜索结果变化
import { watch } from 'vue';
watch(poiOptions, (newVal) => {
  if (newVal.length > 0) {
    console.log('搜索结果已更新，共', newVal.length, '条');
    // 确保下拉框显示
    setTimeout(() => {
      const selectInput = document.querySelector(
        '.search-input .ant-select-selector',
      );
      if (selectInput) {
        // 模拟点击以确保下拉框显示
        selectInput.click();
      }
    }, 100);
  }
});

// 处理搜索输入
const handleSearchInput = (value: string) => {
  console.log('开始搜索:', value);
  if (!value) {
    poiOptions.value = [];
    return;
  }

  if (!autoComplete.value) {
    console.error('自动完成插件未初始化');
    // 尝试重新初始化
    if (AMap.value) {
      try {
        autoComplete.value = new AMap.value.AutoComplete({
          city: '全国',
          citylimit: false,
        });
      } catch (error) {
        console.error('初始化自动完成插件失败:', error);
        return;
      }
    } else {
      return;
    }
  }

  searchLoading.value = true;

  // 使用自动完成插件获取建议
  autoComplete.value.search(value, (status: string, result: any) => {
    searchLoading.value = false;
    console.log('搜索结果状态:', status, '结果:', result);

    if (status === 'complete' && result.tips && result.tips.length > 0) {
      console.log('找到建议位置数量:', result.tips.length);
      // 转换为a-select需要的options格式
      poiOptions.value = result.tips.map((tip: any) => ({
        value: tip.id,
        label: tip.name,
        data: {
          district: tip.district,
          location: tip.location,
          address: tip.address,
          name: tip.name,
        },
      }));

      // 确保下拉框显示
      setTimeout(() => {
        // 强制更新下拉框
        const event = new Event('input');
        document.querySelector('.search-input input')?.dispatchEvent(event);
      }, 0);
    } else {
      console.log('未找到建议位置或搜索失败');
      poiOptions.value = [];
    }
  });
};

// 处理选择变化
const handleSelectChange = (value: string, option: any) => {
  if (!option || !option.data) return;

  const item = option.data;
  searchKeyword.value = item.name;

  // 如果有位置信息，直接定位
  if (item.location) {
    const lng = item.location.lng;
    const lat = item.location.lat;

    // 先更新标记位置
    updateMarkerPosition(lng, lat);

    // 更新地图中心点
    map.value.setCenter([lng, lat]);

    // 设置适当的缩放级别
    map.value.setZoom(15);
  } else {
    // 如果没有位置信息，使用地理编码服务搜索地址
    searchAddress(item.name);
  }
};

// 搜索地址（重载原有方法，支持传入关键词）
const searchAddress = (keyword?: string) => {
  const searchText = keyword || searchKeyword.value;

  if (!searchText || !AMap.value || !geocoder.value) {
    console.error('搜索条件不满足', {
      keyword: searchText,
      AMap: !!AMap.value,
      geocoder: !!geocoder.value,
    });
    return;
  }

  console.log('开始搜索地址:', searchText);

  // 使用高德地图的地理编码服务搜索地址
  geocoder.value.getLocation(searchText, (status: string, result: any) => {
    console.log('搜索结果:', status, result);

    if (
      status === 'complete' &&
      result.geocodes &&
      result.geocodes.length > 0
    ) {
      const lnglat = result.geocodes[0].location;
      console.log('找到位置:', lnglat.lng, lnglat.lat);

      // 确保经纬度值有效
      if (!isNaN(lnglat.lng) && !isNaN(lnglat.lat)) {
        // 先更新标记位置
        updateMarkerPosition(lnglat.lng, lnglat.lat);

        // 更新地图中心点
        map.value.setCenter([lnglat.lng, lnglat.lat]);

        // 设置适当的缩放级别以便更好地查看结果
        map.value.setZoom(15);
      } else {
        console.error('搜索结果经纬度无效:', lnglat);
        alert('搜索结果经纬度无效，请尝试其他地址');
      }
    } else {
      console.error('地址搜索失败', status, result);
      // 可以添加用户提示
      alert('未找到该地址，请尝试更精确的搜索词');
    }
  });
};

// 组件卸载时清理地图实例
onUnmounted(() => {
  if (map.value) {
    map.value.destroy();
  }
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 400px;
  margin-bottom: 10px;
}

.map-controls {
  display: flex;
  margin-bottom: 10px;
  gap: 10px;
}

.search-container {
  position: relative;
  flex: 1;
}

.search-input {
  width: 100%;
}

.poi-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.poi-district {
  color: #999;
  font-size: 12px;
  margin-left: 4px;
}

.coordinate-display {
  margin-top: 10px;
  font-size: 14px;
}

.map-search-dropdown {
  max-height: 300px;
  overflow-y: auto;
  min-width: 250px;
}

:deep(.ant-select-dropdown) {
  z-index: 1000;
}
</style>
